<template>
  <div>
    <v-content-layout v-model:searchForm="searchForm" @search="search" @reset="search">
      <template #searchFold>
        <v-search-item label="名称">
          <a-input v-model:value="searchForm.name" placeholder="请输入应用名称" />
        </v-search-item>
        <v-search-item label="编号">
          <a-input v-model:value="searchForm.appCode" placeholder="请输入应用编号" />
        </v-search-item>
        <v-search-item label="路径">
          <a-input v-model:value="searchForm.baseUrl" placeholder="请输入应用路径" />
        </v-search-item>
      </template>
      <template #handleBtn>
        <a-button type="primary" @click="addApp">添加</a-button>
      </template>
      <template v-slot:table="{ height }">
        <v-table :height="height" :pagination="false" :listData="listData" :columns="tableColumns">
          <template v-slot:operation="{ record }">
            <v-text-button type="link" @click="editApp(record)">编辑</v-text-button>
            <v-text-button type="link" @click="deleteApp(record)">删除</v-text-button>
          </template>
        </v-table>
      </template>
      <template #pagination>
        <v-pagination
          :total="total"
          v-model:current="searchForm.currentNum"
          v-model:pageSize="searchForm.pageSize"
          @change="getList"
          @showSizeChange="getList"
        ></v-pagination>
      </template>
    </v-content-layout>
    <!--  弹框组件  -->
    <add v-if="addVisible" v-model:visible="addVisible" :init-form="editForm" @close="getList"></add>
  </div>
</template>
<script lang="ts">
export default {
  name: 'system-application'
}
</script>
<script setup lang="ts">
import { tableColumns } from './config';
import { ref, reactive, onMounted, watch } from 'vue';
import useCurrentInstance from 'lib-utils/vueInstance'
import add from './add.vue'
const { proxy } = useCurrentInstance()
let total = ref(0)
let addVisible = ref(false)
let editForm = ref(null)
const searchForm = reactive({
  currentNum: 1,
  pageSize: 10,
  name: '',
  appCode: '',
  baseUrl: ''
})
let listData = ref([])

onMounted(() => {
  getList()
})

const getList = () => {
  proxy.$http.get(proxy.$api.application.list, searchForm).then(res => {
    listData.value = res.dataList
    total.value = res.total
  }).catch(err => {
  })
}

const search = () => {
  getList()
}

const addApp = () => {
  editForm.value = null
  addVisible.value = true
}

const editApp = (record) => {
  editForm.value = record
  addVisible.value = true
}

const deleteApp = (record) => {
  proxy.$vConfirm({
    content: '是否确认删除!'
  }).then((res: any) => {
    proxy.$http.post(proxy.$api.application.delete, {
      id: record.id
    }).then((res: any) => {
      getList()
    }).catch(err => {
    })
  }).catch(err => { })
}
</script>

<style lang="less" scoped>
</style>